import {
  Component,
  ChangeDetectionStrategy,
  ElementRef,
  Input,
  Output,
  EventEmitter,
  ChangeDetectorRef,
  OnInit,
} from '@angular/core';
import { AvtSelectDataService } from './avt-select-data.service';
import { Observable } from 'rxjs';
import {
  animate,
  query,
  stagger,
  style,
  transition,
  trigger,
} from '@angular/animations';
import { group } from 'console';

@Component({
  selector: 'avt-select-top-control',
  animations: [
    trigger('showHide', [
      transition('* <=> *', [
        query(
          ':enter',
          [
            style({ opacity: 0, scale: 0.3 }),
            stagger(50, [
              animate('.2s ease-in', style({ opacity: 1, scale: 1 })),
            ]),
          ],
          { optional: true }
        ),
        // query(
        //   ':leave',
        //   [animate('.2s ease-out', style({ opacity: 0, scale: 0.3 }))],
        //   { optional: true }
        // ),
      ]),
    ]),
  ],
  template: `
    <ng-template #noSel>
      <span style="color: #ccc;">please select id</span>
    </ng-template>
    <div
      class="select-item-container"
      [@showHide]="(finalDisplay$ | async)?.length"
      *ngIf="hasSelectedItem | async; else noSel"
    >
      <avt-select-item
        class="sel-item"
        *ngFor="
          let val of finalValueList;
          let index = index;
          trackBy: trackByFn
        "
      >
        {{ val }}
      </avt-select-item>

      <!-- 清除图标-->
      <avt-clear-icon
        *ngIf="hasSelectedItem | async"
        (click)="clearAll($event)"
        class="ctor-icon clear-up"
      >
      </avt-clear-icon>
    </div>

    <!-- 展开关闭图标-->
    <!--    <app-av-icon type="triangle-down"-->
    <!--                 size="x1"-->
    <!--                 color="primary"-->
    <!--                 class="ctor-icon"-->
    <!--                 [ngStyle]="{-->
    <!--                  transform: transformStyle,-->
    <!--                  transition: '.3s'-->
    <!--                 }"-->
    <!--    ></app-av-icon>-->
  `,
  styles: [
    `
      :host {
        position: relative;
        display: flex;
        min-height: 40px;
        border: 1px solid #546e95;
        border-radius: 5px;
        background-color: #fff;
        color: #546e95;
        cursor: pointer;
        padding-left: 10px;
        z-index: 100;
        align-items: center;
        .select-item-container {
          display: flex;
          flex-wrap: wrap;
        }
        .selected-item {
          margin-left: 3px;
          font-size: 12px;
        }
      }
      .ctor-icon {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }
      .ctor-icon.clear-up {
        right: 6px;
      }
      .ctor-icon[type='triangle-down'] {
        right: 10px;
      }
      ::ng-deep svg {
        width: 14px;
      }
    `,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AvtSelectTopControlComponent implements OnInit {
  @Input() mode: 'single' | 'multi' = 'single';
  @Output() clearSelected = new EventEmitter();
  @Input() isOpen = false;
  @Output() isOpenChange = new EventEmitter<boolean>();
  selected: boolean = false;
  finalValueList: string[] = [];
  finalDisplay$!: Observable<string[]>;
  constructor(
    private el: ElementRef,
    private cdr: ChangeDetectorRef,
    private dataSvc: AvtSelectDataService
  ) {}

  ngOnInit() {
    this.finalDisplay$ = this.dataSvc.finalDisplay$;
    this.hasSelectedItem.subscribe((hasSelected) => {
      console.log(`has selected: ${hasSelected}`);
      this.selected = hasSelected;
    });

    this.finalDisplay$.subscribe((val) => {
      this.finalValueList = val;
    });
  }

  trackByFn(val: any) {
    return val;
  }

  get hasSelectedItem() {
    return this.dataSvc.hasSelectedData$;
  }

  get element() {
    return this.el.nativeElement;
  }

  get elWidth() {
    return this.el.nativeElement.clientWidth;
  }
  get transformStyle() {
    return this.isOpen
      ? 'translateY(-50%) rotate(180deg)'
      : 'translateY(-50%) rotate(0)';
  }

  clearAll(ev: MouseEvent) {
    ev.stopPropagation();
    ev.preventDefault();
    const { selectionMode, singleClear$ } = this.dataSvc;
    selectionMode.clear();
    if (!selectionMode.isMultipleSelection()) {
      singleClear$.next();
    }
  }
}
